<template>
	<view v-if="tradeSetting.is_show_evaluate==1" class="detail_comment" :style="'padding:' + mydata.padding.top + 'px 0 ' + mydata.padding.bottom + 'px 0'">
		<view class="containers" :style="'background:' + mydata.color.bg">
			<view class="label van-hairline--bottom">
				<text class="evaluate" :style="'color:' + mydata.color.title">
					评价
					<text>({{ total }})</text>
				</text>
				<view class="flex align-center" @click="toevaluate" v-if="total > 0">
					<text class="toDetail" :style="'color:' + mydata.color.more">查看更多</text>
					<text class="iconfont el-sc-gengduo"></text>
				</view>
			</view>
			<view class="body">
				<view class="all-comment">
					<view class="com_item van-hairline--bottom" v-for="(item, i) in evaluate_list" :key="i">
						<view class="head">
							<view v-if='item.user' class="userinfo" :style="'color:' + mydata.color.username">
								<view class="avart"><image class="image" :src="item.user.picurl" mode=""></image></view>
								<text class="name">{{ item.user.nickname }}</text>
								<text class="time"></text>
							</view>
							<view class="star" :style="'color:' + mydata.color.start"><uni-rate readonly='true' :size="14" :margin="6" v-model="item.score" :allowHalf="true" /></view>
						</view>
						<view class="content" :style="'color:' + mydata.color.evaluate">{{ item.content }}</view>
						<text v-if="item.pvs_value" class="spec" :style="'color:' + mydata.color.sku">规格:{{ item.pvs_value }}</text>
						<view class="comment-imgs">
							<view @click="showimg(item)" class="img-box" v-for="(data, id) in item.img_url" :key="id"><vimage :src="data" mode="" class="img"></vimage></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '@/common/http.js';
import {mapState, mapMutations} from 'vuex';

export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			total: 0,
			evaluate_list: [],
			tradeSetting:{}
		};
	},
	computed: {
		...mapState({
			details:state=>state.details
		})
	},
	mounted() {
		this.getjuris("tradeSetting").then(a=>{
			this.tradeSetting=a
		})
		this.evaluatelist();
	},
	methods: {
		showimg(item){
			uni.previewImage({
				urls:item.img_url
			})
		},
		toevaluate() {
			if (this.total == 0) {
				return false;
			}
			uni.navigateTo({
				url: '../evaluate/evaluate?id=' + this.details.id
			});
		},
		evaluatelist() {
			let params = {
				id: this.details.id,
				size: 1,
				page: 1
			};
			http('/goods/evaluate', params, 'GET').then(res => {
				if (res.statusCode == 200) {
					let evaluate_list = res.data.msg.data;
					this.total = res.data.msg.total;
					evaluate_list.forEach(a => {
						a.img_url = JSON.parse(a.img_url);
						a.score=a.score/2
					});
					this.evaluate_list = evaluate_list;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.detail_comment {
	width: 100%;
	.containers {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-left: 24rpx;
		width: 100%;
		.label {
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: relative;
			padding-right: 24rpx;
			box-sizing: border-box;
			&::after {
				content: ' ';
				position: absolute;
				pointer-events: none;
				box-sizing: border-box;
				transform-origin: center;
				top: -50%;
				left: -50%;
				right: -50%;
				bottom: -50%;
				transform: scale(0.5);
				border-width: 0 0 1px 0;
				border-bottom-color: #e6e7eb;
				border-style: solid;
			}
			.evaluate {
				font-size: 28rpx;
				color: #212121;
				line-height: 80rpx;
			}

			.toDetail {
				font-size: 24rpx;
				color: #969696;
			}
			
			.icon-m-right {
				color: #969696;
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 32rpx;
			}
		}
		.body {
			width: 100%;
			position: relative;
			.all-comment {
				width: 100%;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 500;
				overflow: hidden;
				.com_item {
					padding-right: 24rpx;
					position: relative;
					list-style: none;
				}
				.head {
					display: flex;
					font-size: 28rpx;
					line-height: 40rpx;
					justify-content: space-between;
					margin: 16rpx 0;
					.userinfo {
						display: flex;
						flex-wrap: nowrap;
					}
					.avart {
						width: 40rpx;
						height: 40rpx;
						-ms-flex-negative: 0;
						flex-shrink: 0;
						border-radius: 50%;
						overflow: hidden;
						.image {
							border-radius: 50%;
							width: 100%;
							height: 100%;
							display: block;
						}
					}
					.name {
						flex: 1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						padding-left: 20rpx;
					}
					.time {
						-ms-flex-negative: 0;
						flex-shrink: 0;
						font-size: 24rpx;
						display: inline-block;
						margin: 0 16rpx;
					}
				}
				.star {
					margin-bottom: 5rpx;
					font-size: 30rpx;
				}
				.content {
					font-size: 28rpx;
					line-height: 40rpx;
					padding-bottom: 16rpx;
					overflow: hidden;
					word-break: break-all;
				}
				.spec {
					font-size: 24rpx;
					line-height: 34rpx;
					color: #969696;
					padding-bottom: 16rpx;
					display: block;
				}
				.comment-imgs {
					padding-bottom: 16rpx;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					.img-box {
						overflow: hidden;
						border-radius: 12rpx;
						width: 220rpx;
						height: 220rpx;
						box-sizing: border-box;
						margin-bottom: 16rpx;
						margin-right: 20rpx;
						&:nth-child(3n) {
							margin-right: 0;
						}
						.img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}
.align-center {
	align-items: center;
}
.flex {
	display: flex;
}
</style>
